<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>welcome</title>
<link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css">
		<style type="text/css">
		  p{
	            font-family:sans-serif;
	            font-size: 22px;
	        }
	     thead{
		     color:cornflowerblue;
		     font-family:sans-serif;
		     font-size: 16px;
	     }
	     tbody{
	         color:dodgerblue;
	     }
		</style>
	
</head>
<body>
	<p class="bg-primary">welcome,${sessionScope.u.username}</p>
	<button type="button" class="btn btn-info" data-toggle="modal"  data-target="#addmyModal"  onclick="javascript:addBook();return false;">Add Book</button><br>
	<table class="table table-striped table-bordered table-hover table-condensed" >
	<thead>
	   <tr>
	   <td>Bookid</td>
	   <td>Bookname</td>
	   <td>Author</td>
	   <td>Price</td>
	   <td>DELETE</td>
	   <td>UPDATE</td>
	   </tr>
	</thead>
	<tbody id="book">
	
	</tbody>
	</table>
	
	
	<!-- -add book -->
	<div class="modal fade" id="addmyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Add Book</h4>
                      </div>
                       
                      <div class="modal-body">
                        <!----book---->
                          <input type="hidden" name="bookid" id="addbookid" readonly="readonly">
                          <input type="text" name="bookname" id="addbookname"  placeholder="bookname"><br><br>
                          <input type="text" name="author" id="addauthor" placeholder="author"><br><br>
                          <input type="text" name="price" id="addprice" placeholder="price"><br><br>        
                      </div>
                      
                        <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" >Cancel</button>
                        <input type="submit" class="btn btn-primary" id="addbook"  value="Add">
                        </div>
                        
                    </div>
                  </div>
                </div>
	
	
	<!-- update book -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Update Book</h4>
                      </div>
                       
                      <div class="modal-body">
                        <!----book---->
                          <input type="text" name="bookid" id="bookid" size="33" readonly="readonly"><br><br>
                          <input type="text" name="bookname" id="bookname" size="33" placeholder="bookname"><br><br>
                          <input type="text" name="author" id="author" size="33" placeholder="author"><br><br>
                          <input type="text" name="price" id="price" size="33" placeholder="price"><br><br>        
                      </div>
                      
                        <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" >Cancel</button>
                        <input type="submit" class="btn btn-primary" id="updatebook"  value="Update">
                        </div>
                     
                    </div>
                  </div>
                </div>

		
	<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
	<script type="text/javascript" src="../js/book.js"></script>
</body>
</html>